import React, { Component } from 'react';

import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
  TouchableOpacity,
  Alert
} from 'react-native';

import styled from 'styled-components';
import {
  addWorkDiary,
  queryByContent,
  queryByCount,
  queryByPoliceCode
} from '../../api';
import { getToken } from '../../utils/auth';
import { Actions } from 'react-native-router-flux';

// import Cal from './cal';
import Calendars from './Calendar';
import LinearGradient from 'react-native-linear-gradient';
import InputItem from 'antd-mobile-rn/lib/input-item';
import WhiteSpace from 'antd-mobile-rn/lib/white-space';
import moment from 'moment';

export default class sportsRankings extends Component {
  state = {
    worklog_error: false,
    worklog: '',
    workcollect: '',
    actiondate: '',
    logCount: '',
    stepData: [],
    isShow: true,
    error: false,
    errorInfo: '',
    imgUrl: require('../../assets/work/sportsRankings/backtrack.png')
  };
  componentDidMount() {
    getToken().then(token => {
      queryByCount(token)
        .then(res => {
          res.data.map(item => {
            this.setState({
              logCount: item.value
            });
          });
        })
        .catch(error => {
          this.setState({
            error: true,
            errorInfo: error
          });
        });
    });
  }
  submit() {
    getToken().then(token => {
      let dto = {
        pwlContent: this.state.worklog,
        pwlDate: this.state.actiondate
      };

      addWorkDiary(token, dto)
        .then(res => {
          console.log(res);
        })
        .catch(error => {
          this.setState({
            error: true,
            errorInfo: error
          });
        });
    });
    this.setState();
  }
  render() {
    return (
      // <ScrollView style={{ backgroundColor: '#FFF', position: 'relative' }}>
      // <View style={{ backgroundColor: '#FFF', position: 'relative' }}>
      <ScrollView
        style={{
          height: 800,
          backgroundColor: '#fff',
          position: 'relative'
        }}>
        <OnTouchableOpacity onPress={() => Actions.home()}>
          <View>
            <Image
              source={this.state.imgUrl}
              style={{ width: 40, height: 20, margin: 5 }}
            />
          </View>
        </OnTouchableOpacity>
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            flex: 1
          }}>
          <MovementTextTitle>工作日志</MovementTextTitle>
          <Text style={{ marginTop: 50, marginRight: 30 }}>
            今日监狱填写人数：
            {this.state.logCount == 0 ? (
              <Text>0</Text>
            ) : (
              <Text>{this.state.logCount}</Text>
            )}
          </Text>
        </View>
        <View style={styles.container}>
          {/* <Cal /> */}
          <Calendars
            // bgColor='#b50' //背景颜色
            // headTextColor='#b30' //头部文字颜色
            // textColor='#f00' //日期文字颜色
            // activeBgColor='#fb0' //选中背景色
            // activeTextColor='#fff' //选中文字颜色
            //borderRadius={0} //圆角
            callback={data => {
              this.state.actiondate = data[0].actiondate;
              this.state.actiondate = this.state.actiondate.replace('年', '-');
              this.state.actiondate = this.state.actiondate.replace('月', '-');
              this.state.actiondate = this.state.actiondate.replace('日', '');
              const ssss = new Date(this.state.actiondate).getTime(); //moment(this.state.actiondate).format('YYYY-MM-DD');var time1 = date.getTime();
              const days = new Date(
                moment()
                  .subtract(7, 'days')
                  .format('YYYY-MM-DD')
              ).getTime();
              const aaa = new Date(moment().format('YYYY-MM-DD')).getTime(); //当前时间
              if (ssss >= days && ssss <= aaa) {
                this.setState({
                  isShow: true
                });
              } else {
                this.setState({
                  isShow: false
                });
              }
              getToken().then(token => {
                let params = {
                  pwlDate: this.state.actiondate
                };
                this.setState({
                  worklog: []
                });
                queryByContent(token, params)
                  .then(res => {
                    res.data.rows.forEach(item => {
                      this.setState({
                        worklog: item.pwlPoliceCode,
                        isShow: false
                      });
                    });
                  })
                  .catch(error => {
                    this.setState({
                      error: true,
                      errorInfo: error
                    });
                  });
              });
            }} //回调方法
            presentback={data => {
              console.log(data);
              const ssss = new Date(data).getTime(); //moment(this.state.actiondate).format('YYYY-MM-DD');var time1 = date.getTime();
              const days = new Date(
                moment()
                  .subtract(7, 'days')
                  .format('YYYY-MM-DD')
              ).getTime();
              const aaa = new Date(moment().format('YYYY-MM-DD')).getTime(); //当前时间
              if (ssss >= days && ssss <= aaa) {
                this.setState({
                  isShow: true
                });
              } else {
                this.setState({
                  isShow: false
                });
              }
              getToken().then(token => {
                let params = {
                  pwlDate: data
                };
                this.setState({
                  worklog: []
                });
                queryByContent(token, params)
                  .then(res => {
                    res.data.rows.forEach(item => {
                      this.setState({
                        worklog: item.pwlPoliceCode,
                        isShow: false
                      });
                    });
                  })
                  .catch(error => {
                    this.setState({
                      error: true,
                      errorInfo: error
                    });
                  });
              });
            }}
          />
        </View>
        {/* position: 'absolute', */}
        <Form>
          <View
            style={{
              left: 0,
              top: 0,
              backgroundColor: '#fff',
              width: 340,
              height: 50
            }}>
            <View style={{ flexDirection: 'row' }}>
              <View
                style={{
                  backgroundColor: '#37AD55',
                  borderStyle: 'solid',
                  width: 6,
                  height: 6,
                  borderRadius: 55,
                  margin: 4
                }}>
                <Text
                  style={{
                    fontSize: 15,
                    textAlign: 'center'
                  }}>
                  {' '}
                </Text>
              </View>
              <Text>工作自述：</Text>
            </View>
            <InputItem
              style={{
                backgroundColor: '#fff',
                alignSelf: 'flex-start',
                height: 25
              }}
              placeholder="请输入工作自述 "
              error={this.state.worklog_error}
              onChange={val =>
                this.setState({
                  worklog: val,
                  worklog_error: false
                })
              }
              value={this.state.worklog}
            />
          </View>

          <View
            style={{
              backgroundColor: '#fff',
              width: 340,
              marginTop: 10
            }}>
            <View style={{ flexDirection: 'row' }}>
              <View
                style={{
                  backgroundColor: '#4282F7',
                  borderStyle: 'solid',
                  width: 6,
                  height: 6,
                  borderRadius: 55,
                  margin: 4
                }}>
                <Text
                  style={{
                    fontSize: 15,
                    textAlign: 'center'
                  }}>
                  {' '}
                </Text>
              </View>
              <Text>工作总结：</Text>
            </View>
            <InputItem
              style={{
                backgroundColor: '#fff',
                alignSelf: 'flex-start',
                height: 20
              }}
              placeholder="无 "
              error={this.state.worklog_error}
              onChange={val =>
                this.setState({
                  worklog: val,
                  worklog_error: false
                })
              }
              value={this.state.workcollect}
            />
            <Text>{this.state.workcollect}</Text>
          </View>
          {this.state.isShow ? (
            <CustomLinearGradient
              colors={['#51B6FC', '#7666FE']}
              start={{ x: 0, y: 0 }}
              end={{ x: 1, y: 1 }}>
              <MyTouchableOpacity onPress={() => this.submit()}>
                <LoginText>提交</LoginText>
              </MyTouchableOpacity>
            </CustomLinearGradient>
          ) : null}
        </Form>
      </ScrollView>
      // </View>
      //</ScrollView>
    );
  }
}

const MovementTextTitle = styled.Text`
  font-size: 40;
  margin-top: 25;
  margin-left: 10;
  font-weight: 500;
`;
const styles = StyleSheet.create({
  container: {
    height: 600,
    backgroundColor: '#F5FCFF',
    marginTop: 10
  }
});
const CustomLinearGradient = styled(LinearGradient)`
  margin-left: 14;
  margin-top: 6;
  border-radius: 15;
`;
const MyTouchableOpacity = styled.TouchableOpacity`
  width: 317.67;
  height: 42.17;
  justify-content: center;
  align-items: center;
`;
const LoginText = styled.Text`
  color: white;
  font-size: 15.94;
`;
//transparent position: absolute;
const Form = styled.View`
  background: #fff;
  margin-top: 488;
  margin-left: 30;
  height: 160;
  position: absolute;
  align-items: center;
`;
const OnTouchableOpacity = styled.TouchableOpacity``;
